<template>
	<view>
		<view class="close">
			<image src="../../../static/pray/cha.png" mode="widthFix" style="width: 31rpx;"></image>
		</view>
		<view class="header">	
		    <view class="">添加银行卡</view>
		</view>
		<view class="yanzheng">请验证您的银行预留手机号</view>
		<view class="shuru">
			<input type="text" value="" class="phone" v-model="telphone" placeholder="请输入您的手机号码" />
			<view class="" style="display: flex;align-items: center;">
				<input type="password" value="" class="phone" v-model="VerificationCode" placeholder="请输入短信验证码" />
				<view class="sendout">
					<view v-if="verifyshow" class="" @click="sendcode">发送验证码</view>
					<view v-else style="font-size: 28rpx; color: #2CB2D6;">倒计时{{second}}秒</view>
				</view>
				
			</view>
			
		</view>
		<button type="default" class="btn" @click="login">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				second: '',
				telphone: '',
				VerificationCode: '',
				verifyshow: true,
			};
		},
		methods: {
			// 发送验证码
			async sendcode(){
				let that = this
				if(!(/^1[3456789]\d{9}$/.test(that.telphone))){
					uni.showToast({
						title:'请输入正确的手机号码',
						icon:'none'
					})
					return
				}
				
				uni.showLoading({
					title:'正在发送'
				})
				that.second = 60
				
				const {data} = await that.$myRequest({
					url: 'sms/get_captcha',
					method: 'POST',
					data: {
						mobile: that.telphone,
						event: "addBank"
					}
				})
				console.log(data)
				
				if(data.code ==1){
					uni.hideLoading();
					that.timedown(that.second)
				} else {
					uni.hideLoading()
					uni.showToast({
						title: data.msg,
						icon:"loading"
					})
				}
				
			},
			// 验证码倒计时
			timedown(num){
				let that = this
				if(num ==0) {
					that.verifyshow = true
				} else {
					that.verifyshow = false
					setTimeout(()=>{
						that.second --
						that.timedown(that.second)
					},1000)
				}
			},
			async login() {
				if(this.telphone == ''){
					uni.showToast({
						title:'手机号码不能为空',
						icon:'none'
					})
					return
				}
				if(this.VerificationCode == ''){
					uni.showToast({
						title:'验证码不能为空',
						icon:'none'
					})
					return
				}
				uni.showLoading({
					title:'正在登录'
				})
				const {data} = await this.$myRequest({
					url: 'sms/mobileLogin',
					method: 'POST',
					data: {
						mobile: this.telphone,
						captcha: this.VerificationCode,
						inviteCode: '',
					}
				})
				console.log(data)
				if(!data.code == 1) {
					uni.hideLoading()
					uni.showToast({
						icon:'none',
						title: data.msg
					})
				} else {
					uni.hideLoading()
					
					uni.switchTab({
						url:'../../index/index'
					})
				}
			
			
			},
		}
	}
</script>

<style lang="scss">
	.header {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 35rpx;
		color: #333333;
		padding-top: 80rpx;
		font-weight: 600;
		
	}
	.close {
		position: absolute;
		left: 49rpx;
		top: 85rpx;
	}
	.yanzheng {
		display: flex;
		justify-content: center;
		font-size: 28rpx;
		color: #666666;
		padding-top: 69rpx;
	}
	.shuru {
		padding: 60rpx 50rpx 45rpx 50rpx;
	
		.phone {
			font-size: 28rpx;
			width: 620rpx;
			height: 77rpx;
			background-color: #EEEEEE;
			border-radius: 15rpx;
			padding-left: 30rpx;
			margin-top: 45rpx;
		}
		.sendout {
			background-color: #333333;
			height: 77rpx;
			width: 200rpx;
			margin-top: 40rpx;
			color: #FFFFFF;
			font-size: 28rpx;
			border-radius: 0 17rpx 17rpx 0;
			display: flex;
			justify-content: center;
			align-items: center;
		
		}
	}
	.btn {
		width: 650rpx;
		height: 77rpx;
		background-color: #C52B2E;
		line-height: 77rpx;
		color: #FFFFFF;
		border-radius: 15rpx;
	}
	

</style>
